<template>
    <div id="login">
        <div class="panel loginbox" id="left">
            <div class="text-center margin-big padding-big-top">
                <h1>后台管理中心</h1>
            </div>
            <div class="panel-body" style="padding: 30px; padding-bottom: 10px; padding-top: 10px">
                <div class="form-group">
                    <div class="field field-icon-right">
                        <input type="text" class="input input-big" v-model="loginVo.account" placeholder="登录账号" />
                        <span class="icon icon-user margin-small"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="field field-icon-right">
                        <input type="password" class="input input-big" v-model="loginVo.password" placeholder="登录密码" />
                        <span class="icon icon-key margin-small"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="field">
                        <input type="text" class="input input-big" name="code" v-model="loginVo.code"
                            placeholder="填写右侧的验证码" style="width: 330px;display: inline" />
                        <img :src=captcha @click="refreshCaptcha" title="看不清，换一张" alt="加载错误" width="100" height="46">
                    </div>
                </div>

                <div style="padding: 30px">
                    <input type="button" :plain="true" class="button button-block bg-main text-big input-big"
                        @click="userLogin" value="登录" />
                </div>
            </div>
        </div>
        <div id="right">
            <div id="right1">
                <svg t="1662632020521" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2677" width="40" height="40">
                    <path
                        d="M950.93248 438.82496L569.82016 48.62464a63.77472 63.77472 0 0 0-45.45536-18.84672 63.96416 63.96416 0 0 0-44.74368 18.12992L326.20544 197.48352v-5.8624c0-24.66304-20.05504-44.73344-44.71296-44.73344H203.52c-24.6528 0-44.71296 20.06528-44.71296 44.73344v168.99584L80.50176 436.93056c-54.6304 55.89504-25.97376 111.2832-1.31072 136.67328a63.54944 63.54944 0 0 0 45.9008 19.37408c4.82304 0 9.58976-0.53248 14.24896-1.5872v308.6592c0 46.16704 37.54496 83.72736 83.6864 83.72736h85.248v-0.49664l325.66784 0.49664c41.48736 0 57.71776-36.67456 57.71776-82.37056v-232.66816c0-38.48192-35.47648-69.14048-73.35424-69.14048H405.48352a33.60768 33.60768 0 0 0-33.664 33.66912v187.58144c0 12.62592 6.6048 24.04352 24.64256 22.84544 18.03776-0.59904 21.64224-15.03232 21.64224-33.07008v-146.69312c0-15.03232 12.62592-17.42848 27.65824-17.42848h170.74688c15.03744 0 27.65312 12.6208 27.65312 27.648v232.07424c0 15.0272-12.6208 32.69632-27.65312 32.69632H308.2752v-0.54272H223.0272c-18.3296 0-33.23904-14.93504-33.23904-33.27488v-344.44288l327.68512-319.9232c2.93376-2.82624 4.992-4.25984 6.10304-4.25984 0.71168 0 2.50368 0.60416 6.61504 4.62336l310.69184 319.7184v344.27904c0 18.34496-14.89408 33.27488-33.21856 33.27488l-67.08224 2.66752c-12.96384 0-24.25344 6.30784-24.25344 19.27168a23.47008 23.47008 0 0 0 23.4752 23.4752H807.66464c46.14144 0 83.67616-37.56032 83.67616-83.72736v-307.54304c4.74624 1.1264 9.45152 1.6896 14.0544 1.6896 17.12128 0 33.21856-6.656 45.34272-18.74944 12.14464-12.09856 28.44672-33.3056 28.4416-80.33792 0-17.16224 0-25.24672-28.24704-56.2944zM194.13504 202.3936c0-13.1328 15.744-23.81312 28.89216-23.81312h44.02176c13.14304 0 23.8336 5.64224 23.8336 18.77504v44.86144L194.13504 336.7424V202.3936z m737.69984 316.9536c-6.0672 16.1024-21.1968 27.79136-35.968 27.79136a25.344 25.344 0 0 1-15.37536-5.03808l-0.60928-0.46592-0.5376-0.54784c-71.00928-72.92416-178.84672-186.04544-250.20928-260.90496-40.42752-42.40896-72.36096-75.90912-75.09504-78.47936l-4.50048-4.18816c-13.87008-12.93312-17.7664-16.31744-24.27904-16.31744-8.1664 0-16.42496 6.49216-33.31584 21.2992-3.05664 2.71872-50.90304 49.28-336.88576 330.48576l-13.83424 13.5936-0.80384 0.53248a27.58144 27.58144 0 0 1-15.2832 4.5312h-0.00512c-14.32064 0-29.12256-10.48064-35.99872-25.48736-7.4752-16.32256-4.46464-34.14016 8.26368-48.90112l0.512-0.55296c16.96256-16.93184 393.81504-384.18432 409.84576-399.80544a23.6544 23.6544 0 0 1 16.59904-6.77376 23.6032 23.6032 0 0 1 16.86528 7.0144l371.72736 384.23552c27.55072 24.42752 22.40512 48.6656 18.88768 57.97888z"
                        p-id="2678" fill="#ffffff"></path>
                </svg>
                <div id="span1">
                    <span class="span1">智慧社区</span>
                </div>
            </div>
            <div id="span2">
                <span class="span2">LOGIN</span>
            </div>
        </div>
        <div id="copy">
            <h3 style="font-weight:bold">Copyright&nbsp;&copy;&nbsp;Ninth groups,All Rights Reserved.</h3>
        </div>
    </div>

</template>
<script>
import axios from 'axios';

export default {

    data() {
        return {

            captcha: "",
            loginVo: {
                account: "",
                password: "",
                code: "",
                type: "1",
            },
        }
    },
    created() {
        this.getCaptcha();
        
    },
    methods: {
        getCaptcha: function () {
            axios.get("http://localhost:8080/api/captcha", { responseType: 'blob' }).then((r) => {
                // console.log(r);
                this.captcha = window.URL.createObjectURL(r.data);
            })
        },
        refreshCaptcha: function () {
            this.getCaptcha();
        },

        userLogin() {

            axios.post("http://localhost:8080/api/v1/wy/login", this.loginVo)
                .then((r) => {
                    console.log(r);
                    if (r.data.code == "200") {
                        this.$message({
                            message: '登录成功，即将跳转',
                            type: 'success',

                        });
                        setTimeout(() => {
                            localStorage.setItem("jwt", r.headers.jwt);
                            location.href = "index.html";
                        }, 1500);
                    } else if (r.data.code == "402") {
                        this.$message({
                            message: '验证码错误！',
                            type: 'error',

                        });

                    } else if (r.data.code == "401") {
                        this.$message({
                            message: '账号或密码错误！',
                            type: 'error'
                        });
                    } else if (r.data.code == "501") {
                        this.$message({
                            message: 'Invalid Token,please login again!',
                            type: 'error'
                        });
                    }
                });
        },
    },
}

</script> 
<style>
#login {
    position: relative;
    height: 737px;
    background-image: url(@/assets/css/img/350.jpg);
    background-size: cover;
}

#left {
    position: absolute;
    left: 700px;
    top: 100px;
    width: 500px;
    height: 500px;
    margin: 0px;
    background-color: white;
    background-size: cover;
}

#right {
    position: absolute;
    left: 300px;
    top: 100px;
    width: 400px;
    height: 500px;
    /* border: 1px solid blue; */
    background-image: url(@/assets/css/img/003.jpg);
    background-size: cover;
}

#right1 {
    position: absolute;
    text-align: center;
    left: 20px;
    top: 30px;
}

#copy {
    position: absolute;
    text-align: center;
    left: 550px;
    top: 620px;
}

#span1 {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 200px;
}

.span1 {
    font-size: 30px;
    color: white;
}

#span2 {
    position: absolute;
    left: 50px;
    top: 240px;
    width: 200px;
}

.span2 {
    font-size: 50px;
    color: white;
}
</style>